<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UC-TC-001：视频拆解和编辑原型</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/antd@5.12.8/dist/reset.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #f5f5f5;
            color: #333;
        }
        
        .header {
            background: #fff;
            padding: 16px 24px;
            border-bottom: 1px solid #e8e8e8;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .breadcrumb {
            color: #666;
            font-size: 14px;
        }
        
        .breadcrumb a {
            color: #1890ff;
            text-decoration: none;
        }
        
        .main-content {
            padding: 24px;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .toolbar {
            background: #fff;
            padding: 16px 20px;
            border-radius: 8px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .toolbar-left {
            display: flex;
            gap: 12px;
            align-items: center;
        }
        
        .toolbar-right {
            display: flex;
            gap: 12px;
            align-items: center;
        }
        
        .btn {
            padding: 8px 16px;
            border: 1px solid;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.3s;
        }
        
        .btn-primary {
            background: #1890ff;
            border-color: #1890ff;
            color: #fff;
        }
        
        .btn-primary:hover {
            background: #40a9ff;
            border-color: #40a9ff;
        }
        
        .btn-default {
            background: #fff;
            border-color: #d9d9d9;
            color: #333;
        }
        
        .btn-default:hover {
            border-color: #1890ff;
            color: #1890ff;
        }
        
        .status-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background: #f8f9fa;
            border-radius: 6px;
            font-size: 14px;
        }
        
        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #52c41a;
        }
        
        .status-dot.processing {
            background: #1890ff;
            animation: pulse 1.5s infinite;
        }
        
        .status-dot.error {
            background: #ff4d4f;
        }
        
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }
        
        .video-section {
            background: #fff;
            border-radius: 8px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .video-player {
            position: relative;
            background: #000;
            height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .video-placeholder {
            color: #fff;
            text-align: center;
        }
        
        .video-placeholder-icon {
            font-size: 48px;
            margin-bottom: 16px;
            opacity: 0.6;
        }
        
        .video-controls {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,0.8));
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .play-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #1890ff;
            border: none;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .progress-bar {
            flex: 1;
            height: 4px;
            background: rgba(255,255,255,0.3);
            border-radius: 2px;
            position: relative;
            cursor: pointer;
        }
        
        .progress-fill {
            height: 100%;
            background: #1890ff;
            border-radius: 2px;
            width: 30%;
        }
        
        .time-display {
            color: #fff;
            font-size: 12px;
            white-space: nowrap;
            font-family: monospace;
        }
        
        .volume-control {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .volume-slider {
            width: 60px;
            height: 4px;
            background: rgba(255,255,255,0.3);
            border-radius: 2px;
            position: relative;
            cursor: pointer;
        }
        
        .volume-fill {
            height: 100%;
            background: #1890ff;
            border-radius: 2px;
            width: 70%;
        }
        
        .timeline-section {
            background: #fff;
            border-radius: 8px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            padding: 20px;
        }
        
        .timeline-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .timeline-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }
        
        .timeline-controls {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        
        .timeline-container {
            position: relative;
            height: 80px;
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 6px;
            overflow: hidden;
        }
        
        .timeline-ruler {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 20px;
            background: #fff;
            border-bottom: 1px solid #e9ecef;
            display: flex;
            align-items: center;
            padding: 0 10px;
        }
        
        .timeline-marks {
            display: flex;
            justify-content: space-between;
            width: 100%;
            font-size: 10px;
            color: #666;
        }
        
        .timeline-track {
            position: absolute;
            top: 20px;
            left: 0;
            right: 0;
            height: 60px;
            background: #f8f9fa;
        }
        
        .timeline-steps {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 100%;
            display: flex;
        }
        
        .step-block {
            background: #e6f7ff;
            border: 1px solid #91d5ff;
            border-radius: 4px;
            margin: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            color: #1890ff;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .step-block:hover {
            background: #bae7ff;
        }
        
        .step-block.selected {
            background: #1890ff;
            color: #fff;
        }
        
        .keyframe-marker {
            position: absolute;
            top: 0;
            width: 2px;
            height: 100%;
            background: #1890ff;
            cursor: pointer;
        }
        
        .current-position {
            position: absolute;
            top: 0;
            width: 2px;
            height: 100%;
            background: #ff4d4f;
            z-index: 10;
        }
        
        .steps-section {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            padding: 20px;
        }
        
        .steps-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .steps-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }
        
        .steps-actions {
            display: flex;
            gap: 8px;
        }
        
        .steps-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .step-item {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 6px;
            padding: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .step-item:hover {
            background: #e9ecef;
        }
        
        .step-item.selected {
            background: #e6f7ff;
            border-color: #91d5ff;
        }
        
        .step-info {
            flex: 1;
        }
        
        .step-name {
            font-weight: 500;
            color: #333;
            margin-bottom: 4px;
        }
        
        .step-time {
            font-size: 12px;
            color: #666;
        }
        
        .step-actions {
            display: flex;
            gap: 8px;
        }
        
        .btn-small {
            padding: 4px 8px;
            font-size: 12px;
        }
        
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        
        .modal-content {
            background: #fff;
            border-radius: 8px;
            padding: 24px;
            max-width: 600px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .modal-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
        }
        
        .modal-close {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: #999;
        }
        
        .form-item {
            margin-bottom: 16px;
        }
        
        .form-item label {
            display: block;
            font-size: 14px;
            color: #333;
            margin-bottom: 4px;
            font-weight: 500;
        }
        
        .form-item label.required::after {
            content: ' *';
            color: #ff4d4f;
        }
        
        .form-item input,
        .form-item textarea,
        .form-item select {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #d9d9d9;
            border-radius: 6px;
            font-size: 14px;
        }
        
        .form-item input:focus,
        .form-item textarea:focus,
        .form-item select:focus {
            outline: none;
            border-color: #1890ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }
        
        .form-row {
            display: flex;
            gap: 16px;
        }
        
        .form-row .form-item {
            flex: 1;
        }
        
        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 20px;
        }
        
        .config-panel {
            background: #f8f9fa;
            padding: 16px;
            border-radius: 6px;
            margin-bottom: 16px;
        }
        
        .config-title {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 12px;
        }
        
        .config-row {
            display: flex;
            gap: 16px;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .config-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .config-item label {
            font-size: 14px;
            color: #333;
            margin: 0;
        }
        
        .config-item input[type="number"] {
            width: 80px;
            padding: 4px 8px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
        }
        
        .config-item input[type="radio"] {
            margin-right: 4px;
        }
        
        .progress-bar-container {
            margin: 16px 0;
        }
        
        .progress-bar-bg {
            width: 100%;
            height: 8px;
            background: #f0f0f0;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .progress-bar-fill {
            height: 100%;
            background: #1890ff;
            border-radius: 4px;
            transition: width 0.3s;
        }
        
        .progress-text {
            text-align: center;
            font-size: 12px;
            color: #666;
            margin-top: 4px;
        }
        
        @media (max-width: 768px) {
            .toolbar {
                flex-direction: column;
                gap: 12px;
            }
            
            .toolbar-left,
            .toolbar-right {
                width: 100%;
                justify-content: center;
            }
            
            .video-player {
                height: 250px;
            }
            
            .timeline-container {
                height: 60px;
            }
            
            .form-row {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <!-- 页面头部 -->
    <div class="header">
        <div class="breadcrumb">
            <a href="#">首页</a> > <a href="#">任务中心</a> > 视频拆解和编辑
        </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
        <!-- 工具栏 -->
        <div class="toolbar">
            <div class="toolbar-left">
                <button class="btn btn-primary" onclick="uploadVideo()">📹 上传视频</button>
                <button class="btn btn-default" onclick="openConfig()">⚙️ 拆解配置</button>
                <button class="btn btn-default" onclick="saveResult()">💾 保存</button>
                <button class="btn btn-default" onclick="exportResult()">📤 导出</button>
            </div>
            <div class="toolbar-right">
                <div class="status-indicator">
                    <div class="status-dot processing"></div>
                    <span>正在处理中...</span>
                </div>
                <button class="btn btn-default" onclick="showHelp()">❓ 帮助</button>
            </div>
        </div>

        <!-- 视频播放器区域 -->
        <div class="video-section">
            <div class="video-player" id="videoPlayer">
                <div class="video-placeholder">
                    <div class="video-placeholder-icon">🎬</div>
                    <div>点击上传视频文件开始拆解</div>
                </div>
                <div class="video-controls" style="display: none;">
                    <button class="play-btn" onclick="togglePlay()">▶️</button>
                    <div class="progress-bar" onclick="seekVideo(event)">
                        <div class="progress-fill"></div>
                    </div>
                    <div class="time-display">0:00 / 0:00</div>
                    <div class="volume-control">
                        <span>🔊</span>
                        <div class="volume-slider" onclick="adjustVolume(event)">
                            <div class="volume-fill"></div>
                        </div>
                    </div>
                    <button class="btn btn-default" onclick="toggleFullscreen()">⛶ 全屏</button>
                </div>
            </div>
        </div>

        <!-- 时间轴区域 -->
        <div class="timeline-section">
            <div class="timeline-header">
                <div class="timeline-title">时间轴</div>
                <div class="timeline-controls">
                    <button class="btn btn-small btn-default" onclick="zoomOut()">🔍-</button>
                    <button class="btn btn-small btn-default" onclick="zoomIn()">🔍+</button>
                    <button class="btn btn-small btn-default" onclick="fitToWindow()">适应窗口</button>
                    <button class="btn btn-small btn-default" onclick="toggleKeyframeMode()">关键帧模式</button>
                </div>
            </div>
            <div class="timeline-container" id="timelineContainer">
                <div class="timeline-ruler">
                    <div class="timeline-marks">
                        <span>0:00</span>
                        <span>0:30</span>
                        <span>1:00</span>
                        <span>1:30</span>
                        <span>2:00</span>
                        <span>2:30</span>
                        <span>3:00</span>
                    </div>
                </div>
                <div class="timeline-track">
                    <div class="timeline-steps" id="timelineSteps">
                        <!-- 步骤块将通过JavaScript动态生成 -->
                    </div>
                    <div class="keyframe-marker" style="left: 10%;"></div>
                    <div class="keyframe-marker" style="left: 30%;"></div>
                    <div class="keyframe-marker" style="left: 50%;"></div>
                    <div class="keyframe-marker" style="left: 70%;"></div>
                    <div class="keyframe-marker" style="left: 90%;"></div>
                    <div class="current-position" id="currentPosition" style="left: 30%;"></div>
                </div>
            </div>
        </div>

        <!-- 步骤配置区域 -->
        <div class="steps-section">
            <div class="steps-header">
                <div class="steps-title">步骤配置</div>
                <div class="steps-actions">
                    <button class="btn btn-small btn-primary" onclick="addStep()">➕ 添加步骤</button>
                    <button class="btn btn-small btn-default" onclick="batchEdit()">📝 批量编辑</button>
                    <button class="btn btn-small btn-default" onclick="reassemble()">🔄 重新拆解</button>
                </div>
            </div>
            <div class="steps-list" id="stepsList">
                <div class="step-item" onclick="selectStep(this)">
                    <div class="step-info">
                        <div class="step-name">准备工具</div>
                        <div class="step-time">0:00 - 0:30 (30秒)</div>
                    </div>
                    <div class="step-actions">
                        <button class="btn btn-small btn-default" onclick="editStep(event, this)">编辑</button>
                        <button class="btn btn-small btn-default" onclick="moveStep(event, this, -1)">↑</button>
                        <button class="btn btn-small btn-default" onclick="moveStep(event, this, 1)">↓</button>
                        <button class="btn btn-small btn-default" onclick="deleteStep(event, this)">删除</button>
                    </div>
                </div>
                <div class="step-item" onclick="selectStep(this)">
                    <div class="step-info">
                        <div class="step-name">开始操作</div>
                        <div class="step-time">0:30 - 1:00 (30秒)</div>
                    </div>
                    <div class="step-actions">
                        <button class="btn btn-small btn-default" onclick="editStep(event, this)">编辑</button>
                        <button class="btn btn-small btn-default" onclick="moveStep(event, this, -1)">↑</button>
                        <button class="btn btn-small btn-default" onclick="moveStep(event, this, 1)">↓</button>
                        <button class="btn btn-small btn-default" onclick="deleteStep(event, this)">删除</button>
                    </div>
                </div>
                <div class="step-item" onclick="selectStep(this)">
                    <div class="step-info">
                        <div class="step-name">完成检查</div>
                        <div class="step-time">1:00 - 1:30 (30秒)</div>
                    </div>
                    <div class="step-actions">
                        <button class="btn btn-small btn-default" onclick="editStep(event, this)">编辑</button>
                        <button class="btn btn-small btn-default" onclick="moveStep(event, this, -1)">↑</button>
                        <button class="btn btn-small btn-default" onclick="moveStep(event, this, 1)">↓</button>
                        <button class="btn btn-small btn-default" onclick="deleteStep(event, this)">删除</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 拆解配置弹窗 -->
    <div class="modal" id="configModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">拆解配置</h3>
                <button class="modal-close" onclick="closeModal()">&times;</button>
            </div>
            <div class="modal-body">
                <div class="config-panel">
                    <div class="config-title">检测算法</div>
                    <div class="config-row">
                        <div class="config-item">
                            <label><input type="radio" name="algorithm" value="scene" checked> 场景检测</label>
                        </div>
                        <div class="config-item">
                            <label><input type="radio" name="algorithm" value="motion"> 动作检测</label>
                        </div>
                        <div class="config-item">
                            <label><input type="radio" name="algorithm" value="hybrid"> 混合检测</label>
                        </div>
                    </div>
                </div>
                
                <div class="config-panel">
                    <div class="config-title">拆解参数</div>
                    <div class="config-row">
                        <div class="config-item">
                            <label>拆解精度:</label>
                            <label><input type="radio" name="precision" value="1" checked> 1秒</label>
                            <label><input type="radio" name="precision" value="2"> 2秒</label>
                            <label><input type="radio" name="precision" value="5"> 5秒</label>
                        </div>
                    </div>
                    <div class="config-row">
                        <div class="config-item">
                            <label>最小步骤时长:</label>
                            <input type="number" value="3" min="1" max="60"> 秒
                        </div>
                        <div class="config-item">
                            <label>最大步骤数:</label>
                            <input type="number" value="50" min="1" max="100"> 个
                        </div>
                    </div>
                    <div class="config-row">
                        <div class="config-item">
                            <label>检测敏感度:</label>
                            <input type="range" min="0" max="100" value="85" id="sensitivitySlider">
                            <span id="sensitivityValue">85%</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" onclick="closeModal()">取消</button>
                <button class="btn btn-primary" onclick="startDisassemble()">开始拆解</button>
            </div>
        </div>
    </div>

    <!-- 步骤编辑弹窗 -->
    <div class="modal" id="stepEditModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">编辑步骤</h3>
                <button class="modal-close" onclick="closeModal()">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-item">
                    <label class="required">步骤名称</label>
                    <input type="text" id="stepName" value="准备工具">
                </div>
                <div class="form-item">
                    <label>步骤描述</label>
                    <textarea id="stepDescription" placeholder="请输入步骤描述">准备所需工具和材料</textarea>
                </div>
                <div class="form-row">
                    <div class="form-item">
                        <label>开始时间</label>
                        <input type="text" id="stepStartTime" value="0:00">
                    </div>
                    <div class="form-item">
                        <label>结束时间</label>
                        <input type="text" id="stepEndTime" value="0:30">
                    </div>
                </div>
                <div class="form-item">
                    <label>
                        <input type="checkbox" id="stepRequired" checked> 是否必修
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" onclick="closeModal()">取消</button>
                <button class="btn btn-primary" onclick="saveStep()">保存</button>
            </div>
        </div>
    </div>

    <!-- 处理进度弹窗 -->
    <div class="modal" id="progressModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">视频拆解进度</h3>
                <button class="modal-close" onclick="closeModal()">&times;</button>
            </div>
            <div class="modal-body">
                <div class="progress-bar-container">
                    <div class="progress-bar-bg">
                        <div class="progress-bar-fill" id="progressFill" style="width: 75%;"></div>
                    </div>
                    <div class="progress-text" id="progressText">75% - 正在生成步骤时间轴</div>
                </div>
                <div style="margin-top: 16px;">
                    <strong>当前步骤:</strong> 正在生成步骤时间轴<br>
                    <strong>预计剩余时间:</strong> 1分钟<br>
                    <strong>已处理时长:</strong> 22分30秒 / 30分钟
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" onclick="cancelTask()">取消任务</button>
                <button class="btn btn-primary" onclick="closeModal()">后台处理</button>
            </div>
        </div>
    </div>

    <script>
        // 全局变量
        let isPlaying = false;
        let currentTime = 0;
        let totalTime = 1800; // 30分钟
        let selectedStep = null;

        // 上传视频
        function uploadVideo() {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = 'video/*';
            input.onchange = (e) => {
                const file = e.target.files[0];
                if (file) {
                    handleVideoUpload(file);
                }
            };
            input.click();
        }

        function handleVideoUpload(file) {
            console.log('上传视频:', file.name);
            // 模拟视频上传
            setTimeout(() => {
                document.querySelector('.video-placeholder').style.display = 'none';
                document.querySelector('.video-controls').style.display = 'flex';
                updateTimeline();
            }, 1000);
        }

        // 打开配置弹窗
        function openConfig() {
            document.getElementById('configModal').style.display = 'flex';
        }

        // 开始拆解
        function startDisassemble() {
            closeModal();
            document.getElementById('progressModal').style.display = 'flex';
            
            // 模拟拆解进度
            let progress = 0;
            const interval = setInterval(() => {
                progress += Math.random() * 10;
                if (progress >= 100) {
                    progress = 100;
                    clearInterval(interval);
                    setTimeout(() => {
                        closeModal();
                        updateStepsList();
                    }, 1000);
                }
                document.getElementById('progressFill').style.width = progress + '%';
                document.getElementById('progressText').textContent = Math.round(progress) + '% - 正在处理视频';
            }, 500);
        }

        // 更新时间轴
        function updateTimeline() {
            const timelineSteps = document.getElementById('timelineSteps');
            timelineSteps.innerHTML = '';
            
            // 模拟步骤数据
            const steps = [
                { name: '准备工具', start: 0, end: 30, color: '#e6f7ff' },
                { name: '开始操作', start: 30, end: 60, color: '#f6ffed' },
                { name: '完成检查', start: 60, end: 90, color: '#fff7e6' }
            ];
            
            steps.forEach(step => {
                const stepBlock = document.createElement('div');
                stepBlock.className = 'step-block';
                stepBlock.style.left = (step.start / totalTime * 100) + '%';
                stepBlock.style.width = ((step.end - step.start) / totalTime * 100) + '%';
                stepBlock.style.backgroundColor = step.color;
                stepBlock.textContent = step.name;
                stepBlock.onclick = () => selectStepByTime(step.start);
                timelineSteps.appendChild(stepBlock);
            });
        }

        // 更新步骤列表
        function updateStepsList() {
            // 这里可以添加更新步骤列表的逻辑
            console.log('步骤列表已更新');
        }

        // 播放控制
        function togglePlay() {
            isPlaying = !isPlaying;
            const playBtn = document.querySelector('.play-btn');
            playBtn.textContent = isPlaying ? '⏸️' : '▶️';
            
            if (isPlaying) {
                startPlayback();
            } else {
                stopPlayback();
            }
        }

        function startPlayback() {
            // 模拟播放
            const interval = setInterval(() => {
                if (!isPlaying) {
                    clearInterval(interval);
                    return;
                }
                currentTime += 1;
                updateCurrentPosition();
                if (currentTime >= totalTime) {
                    currentTime = 0;
                }
            }, 1000);
        }

        function stopPlayback() {
            // 停止播放
        }

        function updateCurrentPosition() {
            const position = (currentTime / totalTime) * 100;
            document.getElementById('currentPosition').style.left = position + '%';
            
            const progressFill = document.querySelector('.progress-fill');
            progressFill.style.width = position + '%';
            
            const timeDisplay = document.querySelector('.time-display');
            timeDisplay.textContent = formatTime(currentTime) + ' / ' + formatTime(totalTime);
        }

        function formatTime(seconds) {
            const mins = Math.floor(seconds / 60);
            const secs = seconds % 60;
            return mins.toString().padStart(2, '0') + ':' + secs.toString().padStart(2, '0');
        }

        // 时间轴交互
        function seekVideo(event) {
            const rect = event.currentTarget.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const percentage = x / rect.width;
            currentTime = Math.floor(percentage * totalTime);
            updateCurrentPosition();
        }

        function selectStepByTime(time) {
            currentTime = time;
            updateCurrentPosition();
        }

        // 步骤管理
        function selectStep(element) {
            document.querySelectorAll('.step-item').forEach(item => {
                item.classList.remove('selected');
            });
            element.classList.add('selected');
            selectedStep = element;
        }

        function editStep(event, element) {
            event.stopPropagation();
            document.getElementById('stepEditModal').style.display = 'flex';
        }

        function addStep() {
            document.getElementById('stepEditModal').style.display = 'flex';
        }

        function saveStep() {
            closeModal();
            // 这里可以添加保存步骤的逻辑
            console.log('步骤已保存');
        }

        function deleteStep(event, element) {
            event.stopPropagation();
            if (confirm('确定要删除这个步骤吗？')) {
                element.remove();
            }
        }

        function moveStep(event, element, direction) {
            event.stopPropagation();
            const parent = element.parentElement;
            const index = Array.from(parent.children).indexOf(element);
            const newIndex = index + direction;
            
            if (newIndex >= 0 && newIndex < parent.children.length) {
                if (direction > 0) {
                    parent.insertBefore(element, parent.children[newIndex + 1]);
                } else {
                    parent.insertBefore(element, parent.children[newIndex]);
                }
            }
        }

        // 其他功能
        function saveResult() {
            console.log('保存拆解结果');
        }

        function exportResult() {
            console.log('导出拆解结果');
        }

        function showHelp() {
            console.log('显示帮助');
        }

        function batchEdit() {
            console.log('批量编辑');
        }

        function reassemble() {
            if (confirm('确定要重新拆解视频吗？当前配置将丢失。')) {
                startDisassemble();
            }
        }

        function cancelTask() {
            if (confirm('确定要取消当前任务吗？')) {
                closeModal();
            }
        }

        // 弹窗控制
        function closeModal() {
            document.querySelectorAll('.modal').forEach(modal => {
                modal.style.display = 'none';
            });
        }

        // 点击弹窗外部关闭
        document.querySelectorAll('.modal').forEach(modal => {
            modal.addEventListener('click', (e) => {
                if (e.target === modal) {
                    closeModal();
                }
            });
        });

        // 敏感度滑块
        document.getElementById('sensitivitySlider').addEventListener('input', (e) => {
            document.getElementById('sensitivityValue').textContent = e.target.value + '%';
        });

        // 时间轴控制
        function zoomIn() {
            console.log('放大时间轴');
        }

        function zoomOut() {
            console.log('缩小时间轴');
        }

        function fitToWindow() {
            console.log('适应窗口');
        }

        function toggleKeyframeMode() {
            console.log('切换关键帧模式');
        }

        function adjustVolume(event) {
            console.log('调整音量');
        }

        function toggleFullscreen() {
            console.log('切换全屏');
        }

        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            updateTimeline();
        });
    </script>
</body>
</html>

